<template>
  <div class="Fg-pho-steps" :style="newStyle">
    <van-steps :active="active" :active-color="blue">
      <van-step v-for="item in list" :key="item.value" v-on="$listeners">
        <span :style="newStyle.font">{{item.label}}</span>
      </van-step>
    </van-steps>
    <div
      class="Fg-pho-steps--content"
      v-for="(item,i) in list"
      :key="item.value"
      v-show="i==active"
    >
      <phone-form-row-container :list.sync="item.children" :font="newStyle.font" v-bind="$attrs" />
    </div>
    <div class="Fg-pho-steps--button">
      <van-button type="info" plain block round v-show="active!==0" size="small" @click="pre">上一步</van-button>
      <van-button
        type="info"
        block
        round
        plain
        v-show="active!==list.length-1"
        size="small"
        @click="next"
      >下一步</van-button>
    </div>
  </div>
</template>
 
<script>
import { deepClone, toCamelCase } from "../../../utils/index";
import { blue } from "@/style/color.scss";
import { comMixin } from "../../../utils/comMixins";
export default {
  mixins: [comMixin],
  name: "phone-form-steps",
  props: {
    value: {
      type: [String, Number],
      default: "",
    },
    list: {
      type: Array,
      default: () => [],
    },
    type: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      active: 0,
      deepClone,
      toCamelCase,
      blue,
    };
  },
  methods: {
    pre() {
      this.active--;
    },
    next() {
      this.active++;
    },
  },

  watch: {
    value: {
      immediate: true,
      deep: true,
      handler(newValue) {
        this.active = this.list.findIndex((item) => item.value == newValue);
      },
    },
  },
};
</script>

<style lang="scss" >
.Fg-pho-steps {
  font-size: 14px;
  // display: flex;
  // flex-direction: column;
  .Fg-pho-steps--button {
    .van-button {
      margin-top: 10px;
    }
  }
  .van-steps {
    max-height: 60px;
  }
  .Fg-pho-steps--content {
    height: calc(100% - 90px);
    overflow: auto;
  }
  .van-step__circle-container {
    background: transparent !important;
  }
}
</style>